<template>
  <div>
    <v-card style="width:100%;">
      <v-card-title>
        <h3>{{name}}--</h3><h4>(项目名：<span style="color:#00c853;">{{$route.params.prjName}}</span>)</h4>
      </v-card-title>
    </v-card>
    <p></p>
    <v-card>
      <v-card-text class="px-0 py-0">
        <v-card-title>
          <v-flex xs12 sm12 md5 class="pr-3">
            <v-btn color="success" @click.native="newBuild($route.params.projectId)" small><h4>全自动构建</h4></v-btn>
            <v-btn color="error" @click.native="openUpLoadDialog=true" small><h4>上传包构建</h4></v-btn>
            <v-btn color="info" @click.native="closeBuildList()" small><h4>返回</h4></v-btn>
          </v-flex>
          <v-flex xs12 sm12 md5 class="pr-3">
            <v-text-field append-icon="search" :label="searchLabel" single-line hide-details
                          v-model="search"></v-text-field>
          </v-flex>
        </v-card-title>
        <v-data-table
          :headers="headers"
          :items="items"
          :pagination.sync="pagination"
          :total-items="totalItems"
          :loading="loading"
          :rows-per-page-items="rowsPerPageItems"
          :no-data-text="etext"
          class="elevation-1">
          <template slot="items" slot-scope="props">
            <td class="datastyle" v-for="(value) in tempHeader" :key="value.id">{{props.item[value.value]}}</td>
            <td class="justify-center layout px-0">
              <v-btn small dark color="info" @click="buildInfo(props.item.id)">
                <h4>查看构建信息</h4>
              </v-btn>
              <v-btn small dark color="error" @click="stopBuild(props.item.id)">
                <h4>强制停止</h4>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <v-alert :value="true" color="error" icon="warning">
              {{etext}}
            </v-alert>
          </template>
        </v-data-table>
      </v-card-text>
    </v-card>
  <v-dialog v-model="jenkinsDialog" scrollable max-width="1440px" :fullscreen="$vuetify.breakpoint.xsOnly">
    <v-card>
      <v-card-title>
        <span class="headline">{{ name }}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="scroll-y" id="scroll-target"><pre>{{info}}</pre></v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" flat @click.stop="stopScroll">停止滚动</v-btn>
        <v-btn color="primary" flat @click.stop="jenkinsDialog=false">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <verify :vcodeDialog = "verifyDialog" @upVerify="verifyResult"
            :verifyTitle="verifyTitle" @clsVerify="closeVerifyDialog" ></verify>
  <up-load-package :openUpload = "openUpLoadDialog" @clsUpLoad="openUpLoadDialog=false"></up-load-package>
  <load-layer :loadDialog = "submitLoad" :loadText="loadTitle"></load-layer>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listbuild')
export default {
  name: 'listbuild',
  data: function () {
    return this.$store.state.listbuild
  },
  methods: {
    ...mapActions({
      closeBuildList: 'closeBuildList',
      handlerBuildList: 'handlerBuildList',
      loadBuildHeaders: 'loadBuildHeaders',
      newBuild: 'newBuild',
      buildInfo: 'buildInfo',
      forceStop: 'forceStop',
      stopBuild: 'stopBuild'
    }),
    stopScroll () {
      clearInterval(this.interval)
    },
    closeVerifyDialog () {
      this.verifyDialog = false
    },
    verifyResult () {
      this.forceStop(this.bid)
    }
  },
  watch: {
    pagination () {
      this.handlerBuildList(this.$route.params.projectId)
    },
    search () {
      this.handlerBuildList(this.$route.params.projectId)
    },
    jenkinsDialog () {
      if (!this.jenkinsDialog) {
        clearInterval(this.interval)
        this.info = ''
        this.handlerBuildList(this.$route.params.projectId)
      }
    },
    verifyDialog () {
      if (!this.verifyDialog) {
        this.handlerBuildList(this.$route.params.projectId)
      }
    }
  },
  mounted () {
    this.loadBuildHeaders()
  },
  components: {
    verify: () => import('../../components/verify/verify'),
    'up-load-package': () => import('./upLoadPackage'),
    'load-layer': () => import('../../components/loading/loadLayer')
  }
}
</script>
